<template>
	<view class="pages">
		<u-navbar title="编辑" rightText="" :safeAreaInsetTop="true" @leftClick="leftClick" @rightClick="rightClick">
			<view class="u-nav-slot" slot="right">
				<u-icon name="checkbox-mark" label="完成" labelColor="#68a5e8" color="#68a5e8" size="20"></u-icon>
			</view>
		</u-navbar>
		<view class="" style="position: relative; width: 100%; height: 320rpx; ">
			<view class="swiper_box">
			 
				<swiper v-if="showMideair == 'img'" class="swiper" circular :indicator-dots="indicatorDots"
					:interval="interval" :duration="duration">
			
					<swiper-item v-for="(item, index) of imgList" :key="item.url" class="swiper_item">
						<image :src="item.url" mode="" @tap="_previewImage(item.url,item)"></image>
					</swiper-item>
				</swiper>
				<swiper v-if="showMideair == 'video'" class="swiper" circular :indicator-dots="indicatorDots"
					:interval="interval" :duration="duration">
			
					<swiper-item v-for="(item, index) of videoList" :key="item.url" class="swiper_item">
						<!-- <video :src="item.url" mode=""></video> -->
						<view  v-html="item.url"> </view>
					</swiper-item>
				</swiper>
				<view class="meadia_option">
					<view class="slot_floor">
						<view :class="['item', showMideair == 'img' ? 'active_floor' :'']" @click="showMideair = 'img'">
							图片
						</view>
						<view :class="['item', showMideair == 'video' ? 'active_floor' :'']" @click="showMideair = 'video'">
							视频
						</view>
					</view>
				</view>
			</view>
			<view class="" @click="optionMeader"
				style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10rpx 15rpx; background-color: #3c9cff; color: #fff;">
				选择资源
			</view>
		</view>
		<view class="data" style="margin-top: 10%;">
			<view class="title">
				房源状态
			</view>
			<u-cell-group :border="false">
				<u-cell title="出租状态" :border="false" titleStyle="color:#a09f9f">
					<template slot="value">
						<view class="slot_floor">
							<view :class="['item', houseInfo.rentState == 0 ? 'active_floor' :'']"
								@click="houseInfo.rentState = 0">
								未租
							</view>
							<view :class="['item', houseInfo.rentState == 1 ? 'active_floor' :'']"
								@click="houseInfo.rentState = 1">
								已租
							</view>
						</view>
					</template>
				</u-cell>
		<!-- 		<u-cell title="房源状态" :border="false" titleStyle="color:#a09f9f">
					<template slot="value">
						<view class="slot_floor">
							<view :class="['item', houseInfo.houseState == 0 ? 'active_floor' :'']"
								@click="houseInfo.houseState = 0">
								下架
							</view>
							<view :class="['item', houseInfo.houseState == 1 ? 'active_floor' :'']"
								@click="houseInfo.houseState = 1">
								上架
							</view>
						</view>
					</template>
				</u-cell> -->
				<!-- <u-cell title="官网展示" :border="false" value="已通过审核" titleStyle="color:#a09f9f"></u-cell> -->
				<u-cell title="房间名称" :border="false" titleStyle="color:#a09f9f">
					<u--input slot="value" placeholder="请输入几号房号" border="none" type="number" v-model="houseInfo.roomNumber"
						clearable inputAlign="right" maxlength="2"></u--input>
				</u-cell>
                <u-cell title="租金" :border="false" titleStyle="color:#a09f9f">
					<u--input slot="value" placeholder="请输入内容" border="none" v-model="houseInfo.rental"
						clearable inputAlign="right" type="number"
						></u--input>
				</u-cell>
				<u-cell title="短租费用" :border="false" titleStyle="color:#a09f9f">
					<u--input slot="value" placeholder="请输入内容" border="none" v-model="houseInfo.shortRental"
						clearable inputAlign="right"></u--input>
				</u-cell>
				<u-cell title="对外固定费" :border="false" value="" titleStyle="color:#000;">
	
				</u-cell>
				<view style="padding:20rpx 40rpx;display: flex;justify-content: flex-end; align-items: center;width: 60%;" v-for="(item, index) of livingPaymentList"
					:key="item.name">
					{{ item.paymentItem }} <u--input placeholder="请输入内容"  v-model.trim="item.rates"
						type="number" clearable style="width: 50%; float: right;margin-left: 30rpx;" maxlength="4"></u--input>
				</view>
				<u-gap height="10" bgColor="#eff3f5"></u-gap>
				<view class="title">
					基本信息
				</view>
				<u-cell title="小区名称"  :border="false"   titleStyle="color:#a09f9f">
					<u--input slot="value" placeholder="请输入内容" border="none" v-model="houseInfo.communityName"
						clearable inputAlign="right"></u--input>
				</u-cell>

				<u-cell title="小区地址" :border="false" :value="houseInfo.communityAddress" titleStyle="color:#a09f9f">
					<u--input slot="value" placeholder="请输入内容" border="none" v-model="houseInfo.communityAddress"
						clearable inputAlign="right"></u--input>
				</u-cell>
				<u-cell title="幢/栋" :border="false" :value="houseInfo.buildingNumber" titleStyle="color:#a09f9f">
					<u--input slot="value" placeholder="请输入内容" border="none" v-model="houseInfo.buildingNumber"
						clearable inputAlign="right" type="number" maxlength="3"></u--input>
				</u-cell>
				<u-cell title="门牌号(室号)" :border="false" :value="houseInfo.ventricleNumber" titleStyle="color:#a09f9f">
					<u--input slot="value" placeholder="请输入内容" border="none" v-model="houseInfo.ventricleNumber"
						clearable inputAlign="right" type="number" maxlength="4"></u--input>
				</u-cell>
				<u-cell title="房屋属性" :border="false" titleStyle="color:#a09f9f">
					<view slot="value" style="height:  auto; width: 80%;   text-align: right;" @click="editTag">
						<text  class="tag" v-for="(item, index) of houseInfo.houseLabelList"
							:key="index">{{ item.labelName }},</text>
						<u-icon name="arrow-right" solt="right-icon" style="display: inline-block;"></u-icon>
					</view>
				</u-cell>
				<u-cell title="房间号"  :border="false"  titleStyle="color:#a09f9f">
					<u--input slot="value" placeholder="请输入房间号" border="none" v-model="houseInfo.roomNumber"
						clearable inputAlign="right" type="number" maxlength="2"></u--input>
				</u-cell>
				<u-cell title="整套户型" :border="false" titleStyle="color:#a09f9f">
					<view slot="value" style="width: 30%; height: 50rpx; " @click="uninTypeIsShow = true">
						<u-icon style="float: left;" name="arrow-down" :label="houseInfo.houseType"
							labelPos="left"></u-icon>
					</view>
				</u-cell>
				<u-cell title="房间面积" :border="false" titleStyle="color:#a09f9f">
					<u--input slot="value" type="number" placeholder="请输入内容" maxlength="3" border="none" v-model="houseInfo.area" clearable inputAlign="right">
					</u--input>
				</u-cell>
				<!-- <text slot="suffix">平方</text> -->
				<u-cell title="所属楼层" :border="false" titleStyle="color:#a09f9f">
					<view slot="value" style="width: 40%; height: 50rpx; " @click="floorIsShow = true">
						<u-icon style="float: left;" name="arrow-down" :label="houseInfo.floor"
							labelPos="left"></u-icon>
					</view>
				</u-cell>

				<u-gap height="10" bgColor="#eff3f5"></u-gap>

				<u-cell title="钥匙位置" :border="false" titleStyle="color:#a09f9f">
					<view slot="value" style="width: 50%; ">
						<uni-data-select :localdata="houseKeyRange" @change="changehouseType"
							:clear="false"></uni-data-select>
					</view>
				</u-cell>
				<u-gap height="10" bgColor="#eff3f5"></u-gap>

				<u-cell :title="lableName" :border="false" titleStyle="color:#a09f9f" v-show="keyIsShow">
					<u--input slot="value" placeholder="请输入内容" border="none" v-model="houseInfo.remark"
						clearable inputAlign="right"></u--input>
				</u-cell>

				<u-gap height="10" bgColor="#eff3f5"></u-gap>
				<u-cell title="带看联系人" :border="false" titleStyle="color:#a09f9f">
					<u--input slot="value" placeholder="请输入带看联系人" border="none" v-model="houseInfo.viewingContact"
						clearable inputAlign="right"></u--input>
				</u-cell>
				<u-gap height="10" bgColor="#eff3f5"></u-gap>
				<u-cell title="联系人号码" :border="false" titleStyle="color:#a09f9f">
					<u--input slot="value" placeholder="请输入联系人号码" border="none" type="number" v-model="houseInfo.viewingContactPhone"
						clearable inputAlign="right" maxlength="11"></u--input>
				</u-cell>
				<u-gap height="50" bgColor="#eff3f5"></u-gap>
			</u-cell-group>
		</view>
		<!-- 	<view class="button_box">
			<u-button type="primary" text="查看租约" @click="toLease"></u-button>
		</view> -->
		<u-picker :show="uninTypeIsShow" :columns="uninTypeList" @confirm="checkedUninTypeResult"
			@cancel="uninTypeIsShow = false" :closeOnClickOverlay="true"></u-picker>
		<u-picker :show="floorIsShow" :columns="floorTotalData" @confirm="confirmFloorMethod"
			@cancel="floorIsShow = false" :closeOnClickOverlay="true"></u-picker>
		<u-toast ref="uToast"></u-toast>

		<u-popup :show="tagOptionIsShow" @close="tagOptionIsShow = false" @open="tagOptionIsShow = true" mode="center">
			<view class="tag_scroll">
				<scroll-view scroll-y class="scroll_view">
					<u-checkbox-group v-model="checkboxTagName" placement="column" @change="checkboxChange">
						<view class="checked_box" v-for="(item, index) in tagNameList" :key="index">
							<u-checkbox :customStyle="{marginBottom: '8px'}" :label="item.labelName"
								:name="item.labelName" shape="circle" :checked="item.checked">
							</u-checkbox>
						</view>
					</u-checkbox-group>
				</scroll-view>
				<view class="operation">
					<view class="children">
						<u-button type="primary" text="确定" @click="confirmLable"></u-button>
					</view>
					<view class="children">
						<u-button style="color: #000;" text="取消" color="#e5e6e3" @click="tagOptionIsShow = false"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		HouseDetail,
		putDetail
	} from "@/api/house/index.js";
	import uniDataSelect from "@/uni_modules/uni-select/index/index.vue"
	export default {
		data() {
			return {
				showMideair: "img",
			    keyIsShow: false,
				lableName: "",
				tagOptionIsShow: false,
			    livingPaymentList:[],
				floorIsShow: false,
				uninTypeIsShow: false,
				houseInfo: {},
				vule: false,
				FixedFeeList: [{
						paymentItem: '水费',
						rates: ''
					},
					{
						paymentItem: '电费',
						rates: ''
					},
					{
						paymentItem: '煤气谁',
						rates: ''
					},
					{
						paymentItem: '宽带费',
						rates: ''
					},
				],
				houseKeyRange: JSON.parse(uni.getStorageSync('houseInfo')).houseKeyRange,
				imgList: [{
					url: "../../static/default/no_img.png"
				}],
				 
				videoList: ['../../static/default/default.png'],
				uninTypeList: [
					['1室', '2室', '3室', '4室', '5室', '6室', '7室', '8室', '9室'],
					['1厅', '2厅', '3厅', '4厅', '5厅', '6厅', '7厅', '8厅', '9厅'],
					['1卫', '2卫', '3卫', '4卫', '5卫', '6卫', '7卫', '8卫', '9卫'],
				],

				floorTotalData: [
					[],
					[]
				],
				tagNameList: JSON.parse(uni.getStorageSync('houseInfo')).tagNames,
				checkboxTagName: [{
						labelName: "别墅改造"
					},
					{
						labelName: "复式"
					},
					{
						labelName: "是原房"
					},
				],
				lableTagNameList:[],
				lableList: []
			}
		},
		onLoad(option) {
			// this.getHouseDetail(option.id);
			this.houseInfo = JSON.parse(option.info)
			this.livingPaymentList=this.houseInfo.livingPaymentList;
			this.fliterImgList();

			if (this.houseInfo.houseLabelList.length != 0) {
				this.tagNameList.map((item, index) => {
					this.houseInfo.houseLabelList.map((tagItem, tagIndex) => {
					if(item.labelName == tagItem.labelName) {
						item.checked = true
					}
					})
				})
				
				// console.log(this.houseInfo.houseLabelList);
			}
		},
		components: {
			uniDataSelect

		},
		mounted() {
			for (let i = 1; i <= 35; i++) {
				this.floorTotalData[0].push(`第${i}层`);
				this.floorTotalData[1].push(`共${i}层`);
			}


		},
		methods: {
			_previewImage(image, imgList) {
				var imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			confirmLable() {
				this.tagOptionIsShow = false;
				if(this.lableList.length != 0) {
					this.lableList.map((item, index) => {
						let obj  = {
							labelName: item
						}
						this.lableTagNameList.push(obj)
					})
				}
				this.houseInfo.houseLabelList = this.lableTagNameList
			},
			
			checkboxChange(list) {
				this.lableList = list
				// console.log(list);
			
				
			},
			editTag() {
				// console.log('tag');
				this.tagOptionIsShow = true;
			},

			optionMeader() {
				uni.navigateTo({
					url: '../../pages/house/uploadImg?id=' + this.houseInfo.id + '&mediaVoList=' + JSON.stringify(
						this.houseInfo.mediaVoList),
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},

			changehouseType(value) {
				if(value == 0) {
					this.lableName = '密码'
				}else if(value == 7) {
					this.lableName = '其他'
				} 
				if (value == 0 || value == 7) {
					this.keyIsShow = true
				} else {
					this.keyIsShow = false
				}
				this.houseInfo.houseKey = value
			},
			confirmFloorMethod(list) {
				// this.floorName = list.value.join('-');
				this.houseInfo.floor = list.value.join('-')
				this.floorIsShow = false
			},

			checkedUninTypeResult(uninTypeList) {
				this.houseInfo.houseType = uninTypeList.value.join('')
				this.uninTypeIsShow = false
			},
			leftClick() {
				uni.navigateBack(-1)
			},
			async rightClick() {
				this.houseInfo.livingPaymentList = this.livingPaymentList;
				const res = await putDetail(this.houseInfo);
				console.log(res,this.houseInfo);
				if (res.data.code != 200) return this.$refs.uToast.show({
					message: res.data.msg,
					type: 'error'
				})
				this.$refs.uToast.show({
					message: res.data.msg,
					type: 'success'
				});
				setTimeout(() => {
					let pages = getCurrentPages()
					// 上一个页面实例对象
					let beforePage = pages[pages.length - 2]
					// 触发上一个页面中的 getUserInfo 方法
					beforePage.$vm.getHouseDetail(beforePage.$vm.id)
					// 返回上一个页面
					uni.navigateBack()
				}, 1000)
				// uni.navigateTo({
				// 	url: './availabilityEdit?info=' + JSON.stringify(this.houseInfo),
				// 	animationType: this.animation.type,
				// 	animationDuration: this.animation.time
				// })
			},
			fliterImgList() {
				console.log(this.houseInfo);
				if (this.houseInfo.mediaVoList.length != 0) {
					this.imgList = [];
					this.videoList = [];
					this.houseInfo.mediaVoList.map((item, index) => {
						if (item.mediaType == '1') {
							var obj = {
								// url: item.mediaUrl,
								url: '<video  src="' + item.mediaUrl +'" style="width:100%; height:200px;" controls="controls"></video>',
								type: 'video'
							}
							this.videoList.push(obj);
						} else {
							var obj = {
								url: item.mediaUrl,
								type: 'image'
							}
							this.imgList.push(obj);
						}
					})
				}
				console.log(this.imgList);
				console.log(this.videoList, 111);
			},

			changeKeyName(key) {
				let value = ""
				this.houseKeyRange.map((item, index) => {
					if (item.value = key) {
						value = item.text
					}
				})
				return value
			},
			async getHouseDetail(id) {
				const res = await HouseDetail(id);
				if (res.data.code != 200) {
					this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error'
					})
					setTimeout(() => {
						uni.navigateBack(-1)
					}, 1000)

				} else {
					this.houseInfo = res.data.data;
					this.fliterImgList()
				}
			},
			toLease() {
				uni.navigateTo({
					url: '../public/lease/leaseDetail',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/styles/global.scss";
	@import "@/styles/index.scss";
	.item {
		// float: right;
		display: inline-block;
		padding: 6rpx 12rpx;
		border: 1rpx solid #cfcfcf;
		margin-left: 10rpx;
		border-radius: 10rpx;
		background-color: #fff;
		// margin-top: 10rpx;
	}
	
	.active_floor {
		background-color: $theme;
		border: 1rpx solid $theme !important;
		color: #fff;
	}
	.swiper_box {
		position: relative;
		width: 100%;
		height: 400rpx;
		margin-top: 30rpx;
		overflow: hidden;
		background-color: #fff;
	
		.swiper {
			width: 100%;
			height: 100%;
	
			.swiper_item {
				width: 100%;
				height: 100%;
	
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	
		.meadia_option {
			position: absolute;
			z-index: 7;
			bottom: 10rpx;
			left: 50%;
			transform: translateX(-50%);
			// height: 80rpx;
			// width: 200rpx;
			// background-color: #fff;
			// border-radius: 30rpx;
		}
	}
	::v-deep uni-view[data-v-2ef8bac9],
	uni-scroll-view[data-v-2ef8bac9],
	uni-swiper-item[data-v-2ef8bac9] {
		display: block;
	}

	::v-deep .u-checkbox-group--column[data-v-2ef8bac9] {
		display: block;
	}

	::v-depp .u-button__text[data-v-2bf0e569] {
		color: black;
	}
	.tag {
		display: inline-block;
		margin-right: 5rpx;
		padding: 5rpx 10rpx;
		background-color: #3c9cff;
		border-radius: 10rpx;
		color: #fff;
		margin-top: 5rpx;
	}
	.tag_scroll {
		width: 600rpx;
		height: 800rpx;
		// background-color: red;
		padding: 30rpx;
		position: relative;
		box-sizing: border-box;

		.scroll_view {
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: center;
			flex-wrap:wrap;
			.checked_box {
				width: 40%;
				margin-left: 6.2%;
				display: inline-block;
				// background-color: #00aaff;
			}
		}

		.operation {
			position: absolute;
			width: 100%;
			bottom: 0;
			height: 100rpx;
			background-color: #fff;
			left: 0;
			display: flex;
			align-items: center;
			padding: 30rpx;
			box-sizing: border-box;

			.children {
				flex: 1;
			}
		}
	}

	.pages {
		font-size: 32rpx;
		box-sizing: border-box;
		padding-top: 88rpx;

		.data {
			padding-bottom: 80rpx;
		}

		.u-nav-slot {
			color: #00aaff;
			font-weight: bold;
		}

		.u-slot-value {
			color: #00aaff;
			font-weight: bold;
		}

		.title {
			font-weight: bold;
			line-height: 3;
			padding: 0 30rpx;
		}

		.button_box {
			width: 100%;
			background-color: #fff;
			padding: 30rpx;
			position: fixed;
			box-sizing: border-box;
			bottom: 0;
		}

	}

	.slot_floor {
		// width: 100%;
		// height: auto;
	}

	.item {
		// float: right;
		display: inline-block;
		padding: 6rpx 12rpx;
		border: 1rpx solid #b9b9b9;
		margin-left: 10rpx;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.active_floor {
		background-color: $theme;
		border: 1rpx solid $theme !important;
		color: #fff;
	}
</style>